<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html dir="ltr" lang="en-US"> <!--<![endif]-->
<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

<title>Grid :: Caffeine Admin Template</title>

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/icons.css" type="text/css" />
<link rel="stylesheet" href="css/forms.css" type="text/css" />
<link rel="stylesheet" href="css/tables.css" type="text/css" />
<link rel="stylesheet" href="css/ui.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/responsiveness.css" type="text/css" />

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Knob -->
<script type="text/javascript" src="js/jquery.knob.js"></script>

<!-- Caffeine custom JS -->
<script type="text/javascript" src="js/custom.js"></script>

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script> <![endif]--> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/> <![endif]--> 

</head>

<body id="index" class="home">
	
    <div id="loading-block"></div> <!-- Loading block -->
    
    <!-- Container -->
    <div id="container">
        <?php include 'header.php';?>
        <div class="clear"></div>
        <?php include 'navigator.php';?>

        <section id="playground">
            <?php include 'breadcrumb.php';?>
            <?php include 'search-box.php';?>

            <div class="clear"></div>
            
            <section class="full-width">
            	<div class="box no-bg">
	            	<h1>Grid System</h1>
                    <p>For <strong>Caffeine</strong> we have developed a fully responsive fluid grid that automatically adapts to any screen resolution and size. Columns dont have paddings or margins, and becaue of this you can endlessly nest your columns without using those annoying .alpha/.omega / .first/.last classes to avoid losing quality in the way they fit together. Because of the big left sidebar, columns only keep their original size on big resolution screens. On screens with resolutions 800x600 and lower, big columns will convert into a 100% width while small columns will be 50%. Try it out resizing your browser window.
                </div>
            </section>
            
            <div class="clear"></div>
            
            <section class="full-width">
                <section class="full-width">
                    <div class="box no-bg grid-demo">
                        <h3>.full-width</h3>
                    </div>
                </section>
                <div class="clear"></div>
                
                <section class="one-half">
                    <div class="box no-bg grid-demo">
                        <h3>.one-half</h3>
                    </div>
                </section>
                <section class="one-half">
                    <div class="box no-bg grid-demo">
                        <h3>.one-half</h3>
                    </div>
                </section>
                <div class="clear"></div>
                
                <section class="one-third">
                    <div class="box no-bg grid-demo">
                        <h3>.one-third</h3>
                    </div>
                </section>
                <section class="two-thirds">
                    <div class="box no-bg grid-demo">
                        <h3>.two-thirds</h3>
                    </div>
                </section>
                <div class="clear"></div>
                
                <section class="one-fourth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-fourth</h3>
                    </div>
                </section>
                <section class="three-fourths">
                    <div class="box no-bg grid-demo">
                        <h3>.three-fourths</h3>
                    </div>
                </section>
                <div class="clear"></div>
                
                <section class="one-fifth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-fifth</h3>
                    </div>
                </section>
                <section class="one-fifth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-fifth</h3>
                    </div>
                </section>
                <section class="three-fifths">
                    <div class="box no-bg grid-demo">
                        <h3>.three-fifths</h3>
                    </div>
                </section>
                <div class="clear"></div>
                
                <section class="one-sixth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-sixth</h3>
                    </div>
                </section>
                <section class="one-sixth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-sixth</h3>
                    </div>
                </section>
                <section class="two-sixths">
                    <div class="box no-bg grid-demo">
                        <h3>.two-sixths</h3>
                    </div>
                </section>
                <section class="one-sixth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-sixth</h3>
                    </div>
                </section>
                <section class="one-sixth">
                    <div class="box no-bg grid-demo">
                        <h3>.one-sixth</h3>
                    </div>
                </section>
            </section>
            <div class="clear"></div>
            <div class="full-width right">
	<div class="box no-bg">
    	<div class="line-separator"></div>
        
		<span class="copyright">by <a href="http://www.creepypixel.com/" class="creepy-logo fright"></a></span>
    </div>
</div>        </section>    </div>
    
</body> 
</html>